<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加资源</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <!-- 引入 font-aswsome 相关资源 -->
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" action="">
            <!-- 资源标题、分类 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">资源标题：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">资源分类：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <select name="modules" lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <option value="1">layer</option>
                            <option value="2">武汉理工大学计算机学院</option>
                            <option value="3">layim</option>
                            <option value="4">element</option>
                            <option value="5">laytpl</option>
                            <option value="6">upload</option>
                            <option value="7">laydate</option>
                            <option value="8">laypage</option>
                            <option value="9">flow</option>
                            <option value="10">util</option>
                            <option value="11">code</option>
                            <option value="12">tree</option>
                            <option value="13">layedit</option>
                            <option value="14">nav</option>
                            <option value="15">tab</option>
                            <option value="16">table</option>
                            <option value="17">select</option>
                            <option value="18">checkbox</option>
                            <option value="19">switch</option>
                            <option value="20">radio</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 资源地址 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">资源地址：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <textarea name="" placeholder="请输入内容" rows=2 class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">备用地址：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <textarea name="" placeholder="请输入内容" rows=2 class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <!-- 显示与隐藏 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">首页显示：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <input type="radio" name="dd" value="1" title="首页显示" checked="">
                        <input type="radio" name="dd" value="0" title="首页隐藏">
                    </div>
                </div>
                <div class="layui-inline" style="width: 46%">
                    <label class="layui-form-label">全局显示：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <input type="radio" name="ff" value="1" title="全局显示" checked="">
                        <input type="radio" name="ff" value="0" title="全局隐藏">
                    </div>
                </div>
            </div>
            <!-- 资源类型 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">资源类型：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="1" title="广告解锁资源" checked="">
                        <input type="radio" name="sex" value="2" title="广告解锁全文">
                        <input type="radio" name="sex" value="3" title="VIP专享">
                        <input type="radio" name="sex" value="4" title="积分兑换">
                        <input type="radio" name="sex" value="5" title="免费获取">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">所需积分：</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- 封面 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 40%">
                    <label class="layui-form-label">输入封面：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <textarea name="" placeholder="请输入封面的URL" rows=2 class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-inline" style="width: 25%">
                    <label class="layui-form-label">上传封面：</label>
                    <div class="layui-input-block" style="width: 75%">
                        <div class="layui-upload-drag" id="test10" style="height: 100px;width:75%;padding: 0">
                            <i class="layui-icon"></i>
                            <p>点击上传</p>
                        </div>
                    </div>
                </div>
                <div class="layui-inline" style="width: 30%">
                    <div class="layui-input-inline layui-hide" style="width: 100%" id="uploadDemoView">
                        <img src="" alt="上传成功后渲染" style="height: 100px">
                    </div>
                </div>
            </div>

            <!-- 编辑器 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="align-content: center">
                    <script id="editor-html" type="text/plain" style="width:100%;height:500px;"></script>
                </div>
            </div>
            <!-- 保存按钮 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="form-user-auth">立即添加</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<!-- 引入富文本编辑器相关资源 -->
<script type="text/javascript" charset="utf-8" src="/lib/neditor/neditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/lib/neditor/neditor.api.js"></script>
<script type="text/javascript" charset="utf-8" src="/lib/neditor/neditor.service.js"></script>
<script type="text/javascript" charset="utf-8" src="/lib/neditor/i18n/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/lib/neditor/third-party/browser-md5-file.min.js"></script>
<script type="text/javascript" src="/lib/neditor/third-party/jquery-1.10.2.min.js"></script>

<script>
    layui.use(['form', 'upload', 'element'], function () {
        let $ = layui.jquery;
        let form = layui.form, upload = layui.upload, element = layui.element, layer = layui.layer;

        //拖拽上传
        upload.render({
            elem: '#test10',
            url: 'https://httpbin.org/post', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                console.log(res)
            }
        });

        // HTML 编辑器
        let ue = UE.getEditor('editor-html');

        //自定义验证规则
        form.verify({
            // 用户姓名
            usernameVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入角色名称！';
                }
            },
            // 邮箱
            userEmailVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入用户邮箱！';
                }
                let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
                if (!pattern.test(value)) {
                    return '邮箱格式错误！';
                }
            },
            // 手机号
            userPhoneVerify: function (value) {
                let pattern = /^(13[0-9]|14[5|7]|15[0-9]|18[0-9]|19[4|5])\d{8}$/g;
                if (value.length > 0 && !pattern.test(value)) {
                    return '手机号码格式错误！';
                }
            },
            // 密码
            userPasswordVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入密码！';
                }
            },
        });

        //监听提交
        form.on('submit(form-user-add)', function (data) {
            // 密码加密
            let encrypt = new JSEncrypt()
            encrypt.setPublicKey(PUBLIC_KEY)
            data.field.password = encrypt.encrypt(data.field.password)
            // 加载层
            let index_loading = layer.load(1, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            // 发起 添加用户 请求
            $.post("/system/user/add", data.field, function (data) {
                // 关闭加载层
                layer.close(index_loading)
                if (data.code === 200) {
                    // 弹窗确认下一步操作
                    layer.open({
                        type: 0,
                        title: data.msg,
                        closeBtn: 0,        // 不显示右上角的关闭按钮
                        btn: ["继续添加", "关闭"],
                        content: '是否继续添加？',
                        // 【继续添加】按钮响应事件
                        btn1: function (index) {
                            layer.close(index)
                        },
                        // 【关闭】按钮响应事件
                        btn2: function (index) {
                            // 先得到当前iframe层的索引
                            let index2 = parent.layer.getFrameIndex(window.name);
                            // 关闭当前弹窗
                            parent.layer.close(index2);
                        }
                    });
                } else {
                    layer.alert(data.msg, {icon: 2});
                }
            });
            return false;
        });


    });
</script>
</body>
</html>